<template>
  <div>
    <el-dialog
      v-toggle-full
      v-loading.lock="loading"
      class="base-dialog order-inspect"
      :custom-class="'panna-dialog_medium'"
      :append-to-body="true"
      title="录入检验结果"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <el-table
        :data="tableData"
        :header-cell-style="{ height: '50px' }"
        :cell-style="{ height: '44px', overflow: 'auto' }"
        style="width: 100%; height: auto; overflow: auto"
      >
        <el-table-column align="center" label="物料编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="分类">
          <template slot-scope="scope">
            {{ scope.row.typeName }}
          </template>
        </el-table-column>
        <el-table-column label="型号规格">
          <template slot-scope="scope">
            {{ scope.row.size }}
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template slot-scope="scope">
            {{ scope.row.packingUnit }}
          </template>
        </el-table-column>
        <el-table-column label="待检数量">
          <template slot-scope="scope">
            {{ scope.row.pendingCount }}
          </template>
        </el-table-column>
      </el-table>

      <el-form
        ref="formData"
        :model="formData"
        :rules="formDataRules"
        label-width="120px"
        status-icon
      >
        <el-row style="margin-top: 20px; height: 50px">
          <el-col :span="24">
            <el-form-item
              label="供应商"
              :label-width="formLabelWidth"
              prop="supplierId"
              :error="errorMsg.supplierId"
            >
              <el-select
                ref="selectSupplier"
                v-model="formData.supplierId"
                :multiple="false"
                style="width: 43%"
                filterable
                placeholder="请选择供应商"
                value-key="id"
                @change="(val) => selectSupplier(val)"
              >
                <el-option
                  v-for="item in supplierOptions"
                  :key="item.id"
                  :label="item.supplierName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="合格数量"
              :label-width="formLabelWidth"
              prop="qualifiedCount"
              :error="errorMsg.qualifiedCount"
            >
              <el-input
                v-model="formData.qualifiedCount"
                autocomplete="off"
                type="number"
                min="0"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="不合格数量"
              :label-width="formLabelWidth"
              prop="unqualifiedCount"
              :error="errorMsg.unqualifiedCount"
            >
              <el-input
                v-model="formData.unqualifiedCount"
                autocomplete="off"
                type="number"
                min="0"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm('formData')">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSupplierList } from "../../../../api/Material/Common.js";
export default {
  name: "RKInputInspectResultDialog",
  props: {
    dialogInspectResultVisible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  data() {
    return {
      title: "录入检验结果",
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      tableData: [],
      supplierOptions: [],
      initData: {
        id: 0,
        orderNum: "",
        qualifiedCount: 0,
        unqualifiedCount: 0,
        inspectedCount: 0,
        supplierId: null,
        supplierName: null
      },
      formData: {
        groupkey: "",
        id: 0,
        orderNum: "",
        productId: 0,
        productNum: "",
        productName: "",
        size: "",
        pendingCount: 0,
        qualifiedCount: 0,
        unqualifiedCount: 0,
        inspectedCount: 0,
        supplierId: null,
        supplierName: null
      },
      formDataRules: {
        supplierId: [
          {
            required: true,
            trigger: "change",
            validator: this.Helper.validateFunction,
          },
        ],
        qualifiedCount: [
          {
            required: true,
            trigger: "blur",
            validator: this.validateCount,
          },
        ],
        unqualifiedCount: [
          {
            required: true,
            trigger: "blur",
            validator: this.validateCount,
          },
        ],
      },
      initErrorMsg: {
        supplierId: "",
        qualifiedCount: "",
        unqualifiedCount: "",
      },
      errorMsg: {
        supplierId: "",
        qualifiedCount: "",
        unqualifiedCount: "",
      },
    };
  },
  watch: {
  },
  created() {
    this.innerDialogFormVisible = this.dialogInspectResultVisible;
    this.tableData.push(this.rowData);
    this.init();
  },
  methods: {
    async init() {
      this.formData = this.rowData;
      // 默认合格数量=待检数量
      this.formData.qualifiedCount = this.rowData.pendingCount;
      await this.getSupplierOptions();
    },
    getSupplierOptions() {
      return new Promise((resolve) => {
        getSupplierList().then((res) => {
          if (res.data.dataList?.length > 0) {
            this.supplierOptions = res.data.dataList.map(item => {
              return {
                ...item,
                value: item.id
              }
            });
          }
          resolve();
        });
      })
    },
    selectSupplier(val) {
      var obj = {};
      obj = this.supplierOptions.find(function(i) {
        return i.id === val
      });
      this.formData.supplierId = obj.id;
      this.formData.supplierName = obj.supplierName;
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogInspectResultVisible", false);
      this.$refs["formData"].resetFields();
      this.$emit("update:editId", "");
    },
    closeDialog() {
      this.cancel();
    },
    confirm() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          const pendingCount = parseInt(this.rowData.pendingCount);
          const qualifiedCount = parseInt(this.formData.qualifiedCount);
          const unqualifiedCount = parseInt(this.formData.unqualifiedCount);

          if (qualifiedCount === 0 && unqualifiedCount === 0) {
            this.$message.error("合格/不合格数量不能均为0");
            return false;
          }
          if (qualifiedCount + unqualifiedCount > pendingCount) {
            this.$message.error("合格+不合格数量不能大于待检数量");
            return false;
          }
          this.formData.inspectedCount = qualifiedCount + unqualifiedCount;
          this.formData.groupkey = `${this.formData.productId}${this.formData.supplierId}`;
          this.$emit("confirmInspectResult", JSON.parse(JSON.stringify(this.formData)));
          this.closeDialog();
        } else {
          return false;
        }
      });
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("qualifiedCount", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("unqualifiedCount", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("supplierId", this.errorMsg, res.msg);
      }
    },
    validateCount(rule, value, callback) {
      var pattern = /^\d+$/ // 非负整数
      if (!pattern.test(value)) {
        callback(new Error("数据格式错误"));
      } else {
        callback();
      }
    }

  },
};
</script>

<style lang="scss">
.order-inspect {
  margin-top: 10px;
  width: 100%;

  .el-dialog__footer .el-button {
    width: 90px;
  }

  .el-table .cell {
    overflow: visible;
  }

  .el-form {
    border: 1px solid #e6ebf5;

    .el-row {
      border-bottom: 1px solid #e6ebf5;

      &:last-child {
        border-bottom: none;
      }

      .el-col {
        &:nth-child(2n + 1) {
          .el-form-item {
            .el-form-item__label {
              border-left: none;
            }
          }
        }

        .el-form-item {
          margin: 0;
          height: 40px;
          line-height: 40px;

          .el-form-item__label {
            height: 100%;
            line-height: 40px;
            background: #f1f8ff;
            border-left: 1px solid #e6ebf5;
            border-right: 1px solid #e6ebf5;
            text-align: center;
            color: #909399;
            font-weight: bold;
          }

          .el-form-item__content {
            text-align: left;
            height: 100%;
            line-height: 40px;
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>
